<template>
  <div class="tabTypeBox main">
    <el-tag
      :class="{ active: index == activeIndex, tabBox: true }"
      v-for="(item, index) in tagData"
      :color="item.color || '#F5F5F6'"
      effect="dark"
      :key="item.id"
      @click="handle(item, index)"
      >{{ item.value }}</el-tag
    >
  </div>
  <div class="topicModule main">
    <div class="topic-box">
      <div class="topicList" v-if="topicData && topicData.length > 0">
        <div class="topicItem" v-for="(item, index) in topicData" :key="index">
          <div class="avatarBox">
            <a class="avatarLink" href="javascript:void(0);">
              <img
                v-if="item.real === '1'"
                :src="item.src || require('src/assets/imgs/use.png')"
              />
              <img v-else :src="require('src/assets/imgs/use.png')" />
            </a>
          </div>

          <div class="content clearfix">
            <ul class="info">
              <li>
                <span class="tag">{{ item.tagName }}</span>
                <a class="userName" href="javascript:void(0);">
                  <span v-if="item.real === '1'">
                    {{ item.nickName }}
                  </span>
                  <span v-else>匿名用户</span>
                </a>

                <span class="postTime">发表时间：{{ item.createTime }}</span>
                <!-- <span class="lastReplyTime">最新回复：{{ item.modifyTime }}</span> -->
              </li>
            </ul>
            <h2 class="title clearfix">
              <a
                href="javascript:void(0);"
                @click="routerPush(item.id, 'articleDetail')"
                >{{ item.title }}</a
              >
            </h2>
            <div class="clearfix"></div>

            <div class="detail" v-if="false">
              <h2 class="summary" v-html="item.des"></h2>
            </div>
          </div>

          <div class="statistic clearfix">
            <div class="viewTotal">
              <i class="el-icon-view"></i>
              {{ item.views }}
            </div>

            <div class="commentTotal">
              <i class="el-icon-chat-dot-round"></i>
              {{ item.commentTotal }}
            </div>
          </div>
        </div>
        <div class="topicPage" v-if="pager.total > 10">
          <pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :pageNo="pager.pageNo"
            :pageSize="pager.pageSize"
            :total="pager.total"
          ></pagination>
        </div>
      </div>
      <div v-else>
        <el-empty description="暂无数据"></el-empty>
      </div>
    </div>
  </div>
  <div class="main">
    <div class="topic-formModule" v-if="userInfo.secret">
      <div class="addTopic-wrap">
        <div>
          <el-form ref="form" :rules="rules" :inline="true" :model="articleParams">
            <el-form-item label="文章标题" prop="title">
              <el-input
                v-model="articleParams.title"
                style="width: 600px"
                placeholder="请输入标题"
                size="mini"
              ></el-input>
            </el-form-item>

            <el-form-item label="是否匿名" prop="real" style="margin-left: 20px">
              <el-radio-group v-model="articleParams.real">
                <el-radio label="0">是</el-radio>
                <el-radio label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="文章描述" prop="des" v-if="false">
              <el-input
                type="textarea"
                :rows="3"
                v-model="articleParams.des"
                style="width: 600px; margin-left: 20px"
                placeholder="请输入文章描述"
                size="mini"
              ></el-input>
            </el-form-item>
            <el-form-item label="文章类型" prop="tagId" style="margin-left: 20px">
              <el-select
                placeholder="选择类型"
                size="mini"
                style="width: 150px"
                clearable
                v-model="articleParams.tagId"
              >
                <el-option
                  v-for="item in tagTypeData"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div style="margin: 10px 0">
            <editor ref="editorEl" @editChange="getEdit"></editor>
          </div>
          <el-button type="primary" @click="addArticleFn">
            <span style="font-size: 18px">提交</span>
          </el-button>
        </div>
      </div>
    </div>
    <div class="addAnswerModule" v-else>
      <div class="addAnswer-wrap">
        <div class="respond">
          <p>
            请用员工账号
            <a href="javascript:void(0);" @click="toLogin">登录</a>
            后发表话题。
          </p>
        </div>
      </div>
    </div>
  </div>
  <template v-if="dialogVisible">
    <el-dialog
      v-model="dialogVisible"
      center
      lock-scroll
      width="70%"
      :before-close="close"
    >
      <div class="words">
        <h2>1 目的</h2>
        <p>
          为加强企业和员工、员工和员工之间的交流互动，让员工的真实想法得到展现，加速企业与员工信息的传递和共享，及时澄清、化解矛盾，形成企业内部的良性互动。同时建立及时响应的机制，充分重视和尊重有建设性的意见和想法，解决相对应的问题，搭建温馨和谐的交流平台，创造一个良好的讨论环境，结合公司实际情况，特启用本社区。
        </p>
        <h2>2 社区管理规定</h2>
        <p>2.1 用户的权利、义务和责任</p>
        <p>2.1.1 用户在心声社区有自由发言的权利，但发言必须以事实为依据；</p>
        <p>2.1.2 公司鼓励用户实名发言，用户有匿名发言的权利；</p>
        <p>
          2.1.3
          用户在发言时可自己控制内容是否对外部可见。对于敏感内容，社区管理员有权进行可见范围变更。是否属于敏感内容，由社区管理员判断；
        </p>
        <p>
          2.1.4
          用户帐号和密码由用户负责保管；用户不应将其帐号、密码出借给他人使用；如用户转借帐号，所有责任和后果由用户承担，同时社区管理员有权收回或封禁该帐号；
        </p>
        <p>
          2.1.5
          “员工心声”倡导文明、客观、理性的发帖原则，对违规帖，社区管理员有权作出处理（包括但不限于：更改或删除用户张贴的内容等、暂停或终止用户使用社区的权利；违反公司管理规定或者国家法律法规的，社区保留进一步要求用户承担相应责任的权利）。
        </p>
        <p>2.2 禁止传播的信息或资料：</p>
        <p>
          2.2.1
          任何政治言论；任何有关经济、军事、外交等社会公共事务的报道、评论，以及有关社会突发事件的报道、评论；
        </p>
        <p>2.2.2 违反国家宪法、法律、法规的；</p>
        <p>2.2.3 煽动民族仇恨、民族歧视，破坏民族团结的；</p>
        <p>2.2.4 破坏国家宗教政策，宣扬邪教和封建迷信；</p>
        <p>
          2.2.5 散布谣言，扰乱社会秩序，破坏社会稳定的，制造恐慌，影响公司正常经营的；
        </p>
        <p>2.2.6 散布 淫秽、色情、赌博、暴力、凶杀、血腥、恐怖或教唆犯罪的；</p>
        <p>2.2.7 任何形式的借贷款、集资、广告，一切涉及商业利益或个人谋利的；</p>
        <p>
          2.2.8
          任何虚假、骚扰、中伤、辱骂、恐吓、庸俗淫秽、人身攻击或其他任何非法或不当的；
        </p>
        <p>2.2.9 侮辱或者诽谤他人，侵害他人合法权益的；</p>
        <p>
          2.2.10
          涉及违反公司保密管理规定及各部门内部机密的信息，如工资、合同具体金额、个人隐私等信息；
        </p>
        <p>2.2.11 大量、恶意发布重复的问题和相关话题的；</p>
        <p>2.2.12 含有病毒、木马等性质的下载链接或资源；</p>
        <p>2.2.13 任何形式的广告以及含有广告内容及广告链接的帖子。</p>
        <p>2.2.14 其他违反国家法律法规、扰乱社区言论秩序的内容。</p>
        <p>
          凡涉及上述信息的内容，社区有权直接删除或者屏蔽；凡违反规定发布上述信息者，社区视情节轻重有权对其进行警告、线上约谈、封ID、注销ID等处理，直至交由相关部门追究责任。
        </p>
        <p>
          2.3 “员工心声”采用定期的方式回复员工留言，请在留言答复模块中查阅相关答复信息。
        </p>
        <p>2.4 此版面为公司专有的平台，禁止转载、引用、在公司范围外散布版面内容。</p>
        <p>2.5 隐私权保护</p>
        <p>
          保护用户隐私是心声社区的一项基本政策，心声社区不向第三方提供单个用户的注册资料，但下列情况除外：
        </p>
        <p>2.5.1 获得用户的授权；</p>
        <p>2.5.2 根据有关的法律法规要求；</p>
        <p>2.5.3 用户严重违反公司管理规定</p>
        <p>2.6 其他</p>
        <p>2.7.1 心声社区用户观点只代表发布用户本身，不代表公司立场，发帖者责任自负。</p>
        <p>
          2.7.2
          心声社区不对用户发布内容的真实性、合法性、准确性负责，使用者对心声社区发布内容应理性判断，如认为发布内容不当或给其造成损害，可通知管理员，管理员视情况确定是否采取删除、屏蔽、断开链接等措施。
        </p>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button style="width: 150px" type="danger" @click="close">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </template>
</template>

<script lang="ts">
import { ref, reactive, onMounted, computed, Ref, watch } from "vue";
import { getTag, getArticle, addArticle } from "src/plugins/http/server/article/index";
import { getSecret } from "src/plugins/http/server/sys/user";
import { msgFn } from "src/utils";
import store from "src/store";
import { useRoute } from "vue-router";

import userHooks from "src/hooks/userHooks";
import BetterUtilTools from "better-util-tools";
import editor from "@/components/editor/index.vue";
import pagination from "@/components/pagination/index.vue";
import env from "src/config";

const UtilTools = new BetterUtilTools();

export default {
  components: {
    pagination,
    editor,
  },
  setup() {
    const $route = useRoute();
    const userInfo = computed(() => store.state.userInfo);
    const size = () => {
      const sys = UtilTools.getClient();
      if (sys === "mobile") {
        window.location.href = `${env.hostUrl}#/articleList/${$route.params.code}`;
      }
    };
    size();
    window.onresize = () => {
      size();
    };
    const dialogVisible = ref(localStorage.showWordsPc !== "0" && userInfo.value.id);
    const form = ref();
    const { toLogin, routerPush } = userHooks({ self: "0" });
    const code = computed(() => store.state.code);
    const editorEl = ref();
    const tagId = ref();
    const activeIndex = ref(0);
    const topicData = ref();
    // 标签逻辑
    const tagData: Ref<tagObj[]> = ref([]);
    //筛选条件验证规则
    const rules = {
      tagId: [
        {
          required: true,
          message: "文章类型不能为空",
          trigger: "blur",
        },
      ],
      real: [
        {
          required: true,
          message: "是否匿名不能为空",
          trigger: "blur",
        },
      ],
      title: [
        {
          required: true,
          message: "文章标题不能为空",
          trigger: "blur",
        },
      ],
      des: [
        {
          required: true,
          message: "文章描述不能为空",
          trigger: "blur",
        },
      ],
    };

    // 初始化分页对象
    const pager = reactive({
      pageNo: 1,
      pageSize: 10,
      total: 0,
    });
    const getTopic = () => {
      let params: paramsObj = {
        pageNo: pager.pageNo,
        pageSize: pager.pageSize,
        self: false,
      };
      if (tagId.value) {
        params.tagId = tagId.value;
      }
      getArticle({
        data: params,
        // 'opts':{'isLoading':'0'}
      })
        .then((res: any) => {
          res.data.articleDatas.forEach((item: articleObj) => {
            item.createTime = UtilTools.formatDateTime({
              date: item.createTime,
            });
            item.tagName = tagData.value.filter(
              (tag: tagObj) => tag.id === item.tagId
            )[0]?.value;
          });
          topicData.value = res.data.articleDatas;
          pager.total = res.data.total;
        })
        .catch((e) => {
          console.log(e);
        });
    };
    //切换页面大小方法
    const handleSizeChange = (val: number) => {
      pager.pageSize = val;
      pager.pageNo = 1;
      getTopic();
    }; //分页方法
    const handleCurrentChange = (val: number) => {
      pager.pageNo = val;
      getTopic();
    };

    const handle = (obj: tagObj, i: number) => {
      tagData.value.forEach((item: tagObj) => {
        item.color = "#F5F5F6";
      });
      obj.color = "#de5323";
      pager.pageNo = 1;
      activeIndex.value = i;
      tagId.value = obj.id;
      getTopic();
    };
    const articleParams = reactive({
      tagId: null,
      title: null,
      des: null,
      real: "1",
      detail: "",
    });
    const getEdit = (html: string) => {
      articleParams.detail = html;
    };

    const addArticleFn = () => {
      form.value.validate((valid: boolean) => {
        if (valid) {
          if (articleParams.detail) {
            addArticle({
              data: articleParams,
            })
              .then((res: any) => {
                if (res.code === 200) {
                  msgFn("发布成功", "success");
                  articleParams.tagId = null;
                  articleParams.title = null;
                  articleParams.des = null;
                  articleParams.real = "1";
                  articleParams.detail = "";
                  editorEl.value.insert("");
                  getTopic();
                }
              })
              .catch((e: any) => {
                console.log(e);
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };
    const tagTypeData = ref([]);

    const getSecretData = (cb: () => void) => {
      getSecret({
        data: { userName: code.value },
        // 'opts':{'isLoading':'0'}
      })
        .then((res: any) => {
          store.commit("_userInfo", res.data);
          if (cb) {
            cb();
          }
        })
        .catch((e) => {
          // console.log(e);
        });
    };

    const isLogin = ref(false);

    watch(isLogin, () => {
      if (isLogin.value) {
        let params: paramsObj = {
          pageNo: 1,
          pageSize: 99999,
        };
        getTag({
          data: params,
          // 'opts':{'isLoading':'0'}
        }).then((res: any) => {
          const adminTags = [
            "33a18364a759436aaab2dedb6b2a336c",
            "c15add25-f6eb-43a1-ac00-05759e008415",
          ];
          if (!res.data.admin) {
            const tags = UtilTools.deepCopy([], res.data.tagDatas);
            tagTypeData.value = tags.filter((tag: tagObj) => !adminTags.includes(tag.id));
          } else {
            tagTypeData.value = UtilTools.deepCopy([], res.data.tagDatas);
          }
          res.data.tagDatas.unshift({
            createTime: "",
            id: "",
            color: "#de5323",
            modifyTime: "",
            value: "全部",
          });
          tagData.value = res.data.tagDatas;
          store.commit("_setTagData", tagData.value);
        });
        getTopic();
      }
    });

    onMounted(() => {
      if ($route.params.code !== "1") {
        store.commit("_setCode", $route.params.code);
        getSecretData(() => {
          isLogin.value = true;
        });
      } else {
        isLogin.value = true;
      }
    });
    return {
      dialogVisible,
      form,
      editorEl,
      activeIndex,
      topicData,
      tagData,
      tagTypeData,
      pager,
      userInfo,
      rules,
      articleParams,
      getEdit,
      handle,
      routerPush,
      toLogin,
      handleSizeChange,
      handleCurrentChange,
      addArticleFn,
      close() {
        dialogVisible.value = false;
        localStorage.showWordsPc = "0";
      },
    };
  },
};
</script>
<style lang="less" scoped>
@import "~@/views/article/list/index.less";
.words {
  height: 550px;
  overflow-y: auto;
  line-height: 24px;
  padding: 0 15px;
  width: calc(100% + 10px);
  color: #333;
  h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 10px 0;
    &:first-of-type {
      margin-top: 0;
    }
  }
  p {
    text-indent: 2em;
  }
}
</style>
